import React, { useState, useEffect } from 'react'
import { Form, Input, Select, message } from 'antd';
import './createAccount.scss'
import SVG from 'components/SVG';
import Http from '../../../Utils/Http';
import { getVerificationCode, phoneRegister } from 'Api/api';
import { Iresponse } from '../verify.d'
const loginBtnBg = require('assets/account/btn-bg@2x.png')
const Wechat = require('assets/account/Wechat@2x.png')
const { Option } = Select;

interface LoginProps {
    phoneNum: string,
    historyStep: string,
    setStep: (val: string) => any,
    setPhone: (val: string) => any,
    setHistoryStep: (val: string) => any,
}
interface IcreateAccount {
    auth_Code: string
    password: string
    phone: string,
    username?: string
}
interface finishData {
    error: string,
    data: IcreateAccount
}


function CreateAccount(props: LoginProps) {
    const { phoneNum, historyStep, setStep, setHistoryStep, setPhone } = props;
    const [num, setNum] = useState<number>(60) // 倒计时
    const [isSend, setIsSend] = useState<boolean>(false) // 是否发送验证码
    const prefixSelector = (
        <Select defaultValue='86' style={{
            width: 70
        }}>
            <Option value="86">+86</Option>
            <Option value="87">+87</Option>
        </Select>
    );
    const sendCode = () => {
        if (!isSend) {
            setIsSend(true);
            Http.get(`${getVerificationCode}?phone=${phoneNum}`).then(res => {
                if (res.data) {
                    message.success('验证码获取成功！')
                }
            })
        }
    }
    const getCaptcha = (
        <div className='get-captcha-bnt' onClick={sendCode}>
            {
                num === 60 ? '获取验证码' : num
            }
        </div>
    )
    const createAccount = (createInfo: any) => {
        const isCreate: finishData = onFinishFailed(createInfo);
        if (isCreate.error) {
            message.error(isCreate.error);
            return false
        }
        Http.post(`${phoneRegister}`, isCreate.data).then((res: any) => {
            if (res.code === 0) {
                message.error(res.msg)
            } else {
                message.success('账号注册成功！');
                setPhone(isCreate.data.phone)
                setStep('4');
                setHistoryStep('2');
            }
        })

    }
    const onFinishFailed: (createInfo: IcreateAccount) => finishData = (createInfo) => {
        let error: string = '', data: IcreateAccount = {
            phone: '',
            auth_Code: '',
            password: '',
            username: ''
        }
        if (!createInfo.phone) {
            error = error || "请输入手机号";
        } else {
            data.phone = createInfo.phone;
            data.username = createInfo.phone;
        }
        if (!createInfo.auth_Code) {
            error = error || "请输入验证码";
        } else {
            data.auth_Code = createInfo.auth_Code;
        }
        if (!createInfo.password) {
            error = error || "请输入密码";
        } else {
            data.password = createInfo.password;
        }
        return {
            error,
            data
        }
    }
    useEffect(() => {
        let timer: any = 0;
        if (isSend && num !== 0) {
            timer = setInterval(() => {
                setNum(n => {
                    if (n === 1) {
                        setIsSend(false)
                        clearInterval(timer)
                        setNum(60)
                    }
                    return n - 1
                });
            }, 1000)
        }
        return () => {
            clearInterval(timer)
        };
    }, [isSend])

    return (
        <div className='create-box animate-route'>
            <p className='create-box-title' >解锁新技能,上天赋树</p>
            <div className='create-form'>
                <div onClick={() => {
                    setStep(historyStep)
                }}>
                    <SVG xlinkHref='icon-fanhui' className='create-return' />
                </div>
                <p className='create-form-title'>
                    创建账户
                            </p>
                <Form name='create' onFinish={createAccount} initialValues={{ phone: phoneNum }}>
                    <Form.Item
                        name="phone"
                    >
                        <Input className='create-form-account one' placeholder='请输入手机号' addonBefore={prefixSelector} style={{ width: '100%' }} />
                    </Form.Item>
                    <Form.Item
                        name="auth_Code"
                    >
                        <Input className='create-form-account two' placeholder='请输入验证码' addonAfter={getCaptcha} />
                    </Form.Item>
                    <Form.Item
                        className='create-form-input'
                        name="password"
                    >
                        <Input.Password placeholder="请输入密码" style={{ width: '100%' }} />
                    </Form.Item>
                    <Form.Item>
                        <button className='create-btn' type='submit'>
                            <img src={loginBtnBg} alt="登录按钮背景" />
                                创建Skilltree账户</button>
                    </Form.Item>
                    <Form.Item>
                        <div className='create-mode'>
                            <p>社交账号登录</p>
                            <div onClick={() => {
                                setStep('5')
                            }}>
                                <img src={Wechat} alt="登录按钮背景" className='wechat' />
                                <span>微信登录</span>
                            </div>
                        </div>
                    </Form.Item>
                </Form>
            </div>
        </div >
    )
}

export default CreateAccount
